import styles from "@styles/active/activeadd.module.less";

import moment from "moment";
import React, { useState, useEffect } from "react";
import { withRouter } from "react-router-dom";
import { Button, Form, Input, DatePicker, InputNumber } from "antd";
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
import {
  layout,
  namearr,
  cloneArray,
  dateFormatTime,
  disabledDate,
} from "@actions/data";

const { RangePicker } = DatePicker;

function SignUp({ formSignUp, formCreate }) {
  const [newNameArr, setNewNameArr] = useState([...cloneArray(namearr)]);

  useEffect(() => {
    const { startDate, endDate } = formCreate.getFieldValue();
    formSignUp.setFieldsValue({
      activityType: 1,
      optionalEntryForms: [],
      requiredEntryForms: [],
      startDate: startDate,
      endDate: endDate,
      rangepicker: [moment(startDate), moment(endDate)],
    });

    changeParticName();

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 改变 - 选择您希望活动参加者填写的信息
  const changeParticName = (value) => {
    if (value) value.isActive = !value.isActive;
    setNewNameArr([...newNameArr]);
    let cacheNamearr = newNameArr.filter((v) => v.isActive === true);
    let pushObj = {
      requiredEntryForms: [...cacheNamearr],
    };
    formSignUp.setFieldsValue(pushObj);
    console.log(formSignUp.getFieldValue());
  };

  const rangepickerChange1 = (value, valueStr) => {
    formSignUp.setFieldsValue({
      startDate: valueStr[0],
      endDate: valueStr[1],
    });
  };

  return (
    <Form {...layout} layout="vertical" form={formSignUp}>
      <hgroup>
        <h5>基本信息</h5>
        <aside className={styles.signupEssentialInformation}>
          <Form.Item
            name="rangepicker"
            label="活动时间"
            rules={[{ required: true, message: "请选择活动时间" }]}
          >
            <RangePicker
              showTime={{
                defaultValue: [
                  moment("00:00", "HH:mm"),
                  moment("23:59", "HH:mm"),
                ],
              }}
              disabledDate={disabledDate}
              format={dateFormatTime}
              placeholder={["开始时间", "结束时间"]}
              onChange={rangepickerChange1}
            />
          </Form.Item>
          <Form.Item
            label="报名人数"
            name="numberLimit"
            wrapperCol={{ span: 24 }}
          >
            <InputNumber placeholder="不填即无限制" />
          </Form.Item>
        </aside>
      </hgroup>
      <hgroup>
        <h5>选择您希望活动参加者填写的信息</h5>
        <aside className={styles.joinFillInfo}>
          {newNameArr.map((item) => (
            <span
              key={item.key}
              onClick={() => changeParticName(item)}
              className={`${item.isActive ? styles.nameActive : ""}`}
            >
              {item.key}
            </span>
          ))}
        </aside>
      </hgroup>
      <hgroup>
        <h5>可添加补充项目</h5>
        <aside className={styles.supplementBox}>
          <Form.List name="optionalEntryForms">
            {(fields, { add, remove }) => (
              <>
                {fields.map((field) => (
                  <div key={field.key}>
                    <Form.Item
                      {...field}
                      label={`项目名称${field.name + 1}`}
                      name={[field.name, "key"]}
                      fieldKey={[field.fieldKey, "key"]}
                      rules={[
                        {
                          required: true,
                          message: "请输入项目名称",
                        },
                      ]}
                    >
                      <Input placeholder="请输入项目名称，如爱好" />
                    </Form.Item>
                    <DeleteOutlined onClick={() => remove(field.name)} />
                  </div>
                ))}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => add()}
                    block
                    icon={<PlusOutlined />}
                  >
                    Add field
                  </Button>
                </Form.Item>
              </>
            )}
          </Form.List>
        </aside>
      </hgroup>
    </Form>
  );
}

export default withRouter(SignUp);
